/**
 * Copyright 2024 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@use "sass:color";

@use "../common.scss" as common;

.container {
  background: white;
  width: 600px;
  padding: 20px;
  box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.3);
}

mat-form-field {
  width: 600px;
}

.buttons {
  display: grid;
  grid-template-areas: "add remove - close";
  grid-template-columns: auto auto 1fr auto;
  gap: 20px;

  .add-all-button {
    grid: add;
  }

  .remove-all-button {
    grid: remove;
  }

  .close-button {
    grid: close;
  }

  mat-icon {
    margin: 0 5px 0 -5px;
  }

  button {
    display: block;
    margin: 0 0 0 auto;
  }
}

.chip-button-icon {
  width: inherit;
  height: inherit;
  font-size: inherit;
  fill: gray;

  &:hover {
    cursor: pointer;
  }

  &.only {
    color: green;

    &:hover {
      color: color.adjust(green, $lightness: -10%);
    }
  }

  &.remove {
    color: red;

    &:hover {
      color: color.adjust(red, $lightness: -10%);
    }
  }
}

.chip-button {
  &.only {
    padding-right: 4px !important;
  }

  &.remove {
    padding-left: 4px !important;
  }
}

.chip-grid {
  max-height: 400px;

  @include common.show-vertical-scrollbar-always;
}
